<template>
  <div class="menu-wrapper">
    <el-form ref="sysMchForm" :model="shopgetinfo" :rules="rules" label-width="80px">
      <div style="width: 100%;display: flex;align-items: flex-end;border-bottom: 1px #eee solid;margin-bottom: 20px">
        <span style="font-size: 18px;color:#409EFF;margin: 10px 0;">基本信息</span>
      </div>

      <el-form-item label="商户名称" prop="name">

          <el-input v-model="shopgetinfo.name" style="width:205px" />

      </el-form-item>

      <el-form-item label="商户简称" prop="shortName">

          <el-input v-model="shopgetinfo.shortName" style="width:205px" />

      </el-form-item>

      <el-form-item label="行业版本" prop="scopeType">

             <el-select v-model="shopgetinfo.scopeType" placeholder="请选择状态" @change="scopeTypechange">
              <el-option label="标准版" value="1" />
              <el-option label="餐饮版" value="2" />
              <el-option label="水站版" value="3" />
              <el-option label="商超版" value="4" />
              <el-option label="景区版" value="5" />
             </el-select>

      </el-form-item>

<!--      <el-form-item label="商户状态" prop="status">-->
<!--        <el-col :span="12">-->
<!--          <el-select v-model="form.status" placeholder="请选择状态">-->
<!--            <el-option label="等待审核" disabled value="0" v-if="form.status == '0'"/>-->
<!--            <el-option label="审核通过" value="1" />-->
<!--            <el-option label="停止使用" value="2" />-->
<!--          </el-select>-->
<!--        </el-col>-->
<!--      </el-form-item>-->

    <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="详细信息" name="first">
      <account  :shopgetinfo='shopgetinfo' :MuchShow='MuchShow' ref="childRules" :district='district'></account>
    </el-tab-pane>
     <el-tab-pane label="商户资料" name="security">
    <security :shopgetinfo='shopgetinfo' :MuchShow='MuchShow'></security>
     </el-tab-pane>
     <el-tab-pane label="银行信息" name="bank">
       <banklist :shopgetinfo='shopgetinfo' :MuchShow='MuchShow'></banklist>
     </el-tab-pane>
    <el-tab-pane label="进件管理" name="importtab">
       <importtab></importtab>
    </el-tab-pane>
  </el-tabs>
  <el-form-item v-if="isshow==true">
   <el-button  type="primary"  :loading="clicked" @click="updateSysOffice('sysMchForm')">
          修 改
        </el-button>
  </el-form-item>
    </el-form>


  </div>
</template>
<style scoped>
  .menu-wrapper{
    margin: 15px;
  }
</style>
<script>
import security from "./components/security"
import account from "./components/Account"
import banklist from "./components/bank"
import importtab from "./components/importtab"
  import { EventBus } from '@/api/eventBus'
  import utils from '../../utils/utils.js'
  import Distpicker from '@/components/Distpicker/Distpicker'
  import { find,update } from '@/api/sysMch'
  import { checkUserExists } from '@/api/sysUser'
  import md5 from 'js-md5';
  import SingleUpload from '@/components/Upload/singleUpload'
  import { updateMchShop,getMchInfo} from '@/api/sysSetUp'
  export default {
    name:'sysMch-edit',
    components: {
      Distpicker,SingleUpload,security,account,banklist,importtab
    },
    data() {
      return {
        isshow:true,
        activeName:'first',
        MuchShow:true,
          shopgetinfo:{
         name:"",
         telephone:'',
         address:'',
         shopCategoryName:'',
         background:'',
         bankName:'',
         bankNum: null,
         license:null,
         idCardFront:null,
         idCardBack:null,
         bankinfoPhoto:null,
         thedoor:null,
         food:null,
         scene:null,
         promoterPhoto:null,
         otherPhoto:null,
         qrcode:null,
         brokerage:null,
         bankType:"",
         bankId	:""
       },
        singleUploadTitle:'100*100',
        id: '',
        clicked: false, // 按钮防双击
        district: { province: 350000, city: 350200, area: 350203 },
        rules: {
          name: [
            { required: true, message: '请输入商户名称', trigger: 'blur' },
            { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
          ],
          shortName: [
            { required: true, message: '请输入商户简称', trigger: 'blur' },
            { min: 2, max: 20, message: '长度在 2 到 10 个字符', trigger: 'blur' }
          ],
          scopeType: [
            {required: true, message: '请选择商户版本', trigger: 'blur'}
          ]
        }
      }
    },
    watch:{ // 路由地址不变的情况下,如果id变化则重新获取数据
      $route (newVal, oldVal) {
          console.log(newVal);
        if (newVal.name=='sysMch-edit' && newVal.query.id!=this.id) {
          this.getMchInfo()
        }
      }
    },

    created() {
      // this.getData()
      this.getMchInfo()
    },
    methods: {
      onSelected(val) {
        if(!utils.isNull(val.area) && !utils.isNull(val.area.code)){
          this.form.areaId=val.area.code;
          this.form.areaName= val.area.value;
        }
      },
      handleClick(val){
        // console.log(val);
        if(val.paneName=='importtab'){
          this.isshow=false
        }else{
          this.isshow=true
        }

      },
       getMchInfo(){
         const _this = this
           this.id = this.$route.query.id
           const params = new URLSearchParams()
        params.append('mchId', this.id)
      getMchInfo(params).then(res=>{
          this.shopgetinfo=res.data
          this.shopgetinfo.scopeType =JSON.stringify(res.data.scopeType)
          //  this.district = utils.decodeArea('110101');
            const reg = /.+?(省|市|自治区|自治州|县|区)/g
          // console.log(this.form.address.match(reg)[0])
          this.district.province = res.data.areaName.match(reg)[0]
          this.district.city = res.data.areaName.match(reg)[1]
          this.district.area = res.data.areaName.match(reg)[2]

          if(this.shopgetinfo.bankType==null){
            this.shopgetinfo.bankType=""
          }else{
            this.shopgetinfo.bankType =JSON.stringify(res.data.bankType)

          }
          if(this.shopgetinfo.bankId==null){
            this.shopgetinfo.bankId=""
          }else{
            this.shopgetinfo.bankId =JSON.stringify(res.data.bankId)

          }

          // _this.district = utils.decodeArea(res.data.areaId);
      })
    },
      scopeTypechange(val){
        this.shopgetinfo.scopeType=val
      },
    // getData(){
    //     this.id = this.$route.query.id
    //     const _this = this
    //     find(this.id).then(response => {
    //       let sysMch = response.data.sysMch;
    //       _this.form.id = sysMch.id
    //       _this.form.name = sysMch.name
    //       _this.form.shortName = sysMch.shortName
    //       _this.form.address = sysMch.address
    //       _this.form.areaName = sysMch.areaName
    //       _this.form.areaId = sysMch.areaId
    //       _this.form.linkman = sysMch.linkman
    //       _this.form.phone = sysMch.phone
    //       _this.form.remark = sysMch.remark
    //       _this.form.logo = sysMch.logo
    //       _this.form.scopeType =JSON.stringify(sysMch.scopeType)
    //       _this.form.status = 0;
    //       _this.district = utils.decodeArea(sysMch.areaId);
    //     }).catch(error => {
    //     })

    //   },
      updateSysOffice(form) {
        const _this = this
        this.$refs[form].validate((valid) => {
          if (valid) { // 校验表单
          let flag = this.$refs['childRules'].validateForm()
             if (!flag) {
                this.$message.error('信息不完整，请继续填写完整')
                  return false
            }else{
              _this.clicked = true
  //            _this.form.status = parseInt(_this.form.status)
              updateMchShop(_this.shopgetinfo).then(response => {
                console.log(response)
                _this.clicked = false
                  EventBus.$emit('sysMch-edit', response.data)
                  _this.$store.dispatch('tagsView/delView', _this.$route).then(({ visitedViews }) => {
                    _this.$router.push({
                      path: '/sysMch/list'
                    })
                  })// 关闭当前tab回到列表
              }).catch(error => {
                _this.clicked = false

              })

            }
          } else {
            return false
          }
        })
      }
    }
  }
</script>
